<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="file/jquery-3.3.1.min.js"></script>
    <style>
        span{color: red;}
    </style>
</head>
<body>
<button type="button">click</button>
<div></div>
</body>
<script>
<!-- jquery.load(url,{},function(){})   -->
    $(function () {
        $('button').click(function () {
            //1.获取文本内容
            // $('div').load('file/hello.txt');

            //2.获取html
            // $('div').load('file/html/lesson.html');//全部内容
            // $('div').load('file/html/lesson.html li:first','?'+new Date());//第一个li
            // $('div').load('file/html/lesson.html li:eq(2)','?'+new Date());
            // $('div').load('file/html/lesson.html li:odd','?'+new Date());

            //3.获取xml
            // $('div').load('file/who.xml');//全部内容 一行显示
            // $('div').load('file/who.xml work');

            // $('div').load('file/who.xml work',function () {
            //     $(this).css({'font-size':'28px','color':'red'});
            // });

            //4.获取JSON数据 JSON不能直接使用，要通过回调函数进行解析,data是返回的数据，json格式
            $('div').load('file/demo.json',function (data) {
                // alert(data);
                //将JSON转为js对象
                let jsonOBJ = JSON.parse(data);
                //清空当前显示的JSON字符串内容 不然data直接显示在div中
                $(this).empty()
                    //连贯使用append方法
                    .append("<p>姓名：<span>"+jsonOBJ.name+"</span></p>")
                    .append("<p>工资：<span>"+jsonOBJ.salary+"</span></p>")
                    .append("<p>课程：<span>"+jsonOBJ.lesson[1]+"</span></p>")
                    .append("<p>网站：<span>"+jsonOBJ.website.siteName+"</span></p>")
                    .append("<p>域名：<span>"+jsonOBJ.website.domain+"</span></p>")

            })
        })
    })
</script>
</html>